<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全频切换效果</title>
    <style>
        *{margin:0;padding:0;}
        body{
            font-family: Arial,"Microsoft YaHei","Hiragino Sans GB",sans-serif;
        }
        html,body{height:100%;overflow:hidden;}
        h1{
            font-size: 6em;
            font-weight: normal;
        }
        p{
            font-size: 2em;
            margin:0.5em 0 2em 0;
        }
        #container ,.sections ,.section{height:100%;position:relative;}
        #section0,#section1,#section2,#section3{
            background-color:#000;
            background-size:cover;
            background-position:50% 50%;
            text-align:center;
            color:#fff;
            text-shadow:1px 1px 1px #333;
        }
        #section0{background-image: url(images/1.jpg);}
        #section1{background-image: url(images/2.jpg);}
        #section2{background-image: url(images/3.jpg);text-shadow:1px 1px 1px #666;}
        #section3{background-image: url(images/4.jpg);color: #008283;text-shadow:1px 1px 1px #fff;}

        #section0 p{
            color: #F1FF00;
        }
        #section3 p{
            color: #00A3AF;
        }
        .section div{
            position:absolute;
            top:50%;
            width:100%;
            -webkit-transform:translateY(-50%);
            transform:translateY(-50%);
            text-align:center;
        }
        .section h1,.section p{
            opacity: 0;
        }

        .intro h1{
            -webkit-transform: translateX(-100%);
            transform:translateX(-100%);
            -webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
            animation: sectitle0 1s ease-in-out 100ms forwards;
        }
        .intro p{
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -webkit-animation: sec0 1s ease-in-out 100ms forwards;
            animation:sec0 1s ease-in-out 100ms forwards;
        }


        .pages{
            position:fixed;
            list-style: none;;
        }
        .vertical.pages{
            right:10px;
            top:50%;
        }
        .horizontal.pages{
            left:50%;
            bottom:10px;
        }
        .pages li{
            width:8px;
            height:8px;
            border-radius:50%;
            background:#fff;
            margin:10px 5px;
            cursor:pointer;
        }
        .horizontal.pages li{
            float:left;
            display: inline;
            vertical-align:middle;
        }
        .pages li.active{
            width:10px;
            height:10px;
            border:2px solid #FFFE00;
            background:none;
            margin-left:2px;
            margin-top:7px;
        }
        @-webkit-keyframes sectitle0 {
            0%{
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1;
            }
         }
        @keyframes sectitle0 {
            0%{
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1;
            }
        }
        @-webkit-keyframes sec0 {
            0%{
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1;
            }
         }
        @keyframes sec0 {
            0%{
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateX(0);
                transform: translateX(0);
                opacity: 1;
            }
        }
    </style>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="pageswitch.js"></script>
    <script>
        $(function(){
            $("#container").PageSwitch({
                selectors: {    //存放插件的基本元素
                    sections: '.sections',
                    section: '.section',
                    page: '.pages',
                    active: '.active'
                },
                easing: 'ease',                 //动画效果
                duration: 500,                  //动画执行时间
                loop : true,                  //是否允许循环播放
                pagination: true,               //是否显示分页控件
                keyboard : false,                //是否支持键盘事件
                direction  : 'horizontal',     // vertical   horizontal
                callback:function(index){
                    var $curelem = $('#container .section').eq(index);
                    if(!$curelem.hasClass('intro'))
                        $curelem.find('div').addClass('intro')
                                .end().siblings().find('div').removeClass('intro');
                }
            });
        });
    </script>
</head>
<body>
<div id="container">
    <div class="sections">

        <div class="section" id="section0">
            <div class="intro">
                <h1>switchPage</h1>
                <p>Create Beautiful Fullscreen Scrolling Websites</p>
            </div>
        </div>

        <div class="section" id="section1">
            <div>
                <h1>Example</h1>
                <p>HTML markup example to define 4 sections</p>
                <img src="images/example.png"/>
            </div>
        </div>

        <div class="section" id="section2">
            <div>
                <h1>Example</h1>
                <p>The plug-in configuration parameters</p>
                <img src="images/example2.png"/>
            </div>
        </div>

        <div class="section" id="section3">
            <div>
                <h1>THE END</h1>
                <p>Everything will be okay in the end. If it's not okay, it's not the end.</p>
            </div>
        </div>

    </div>
</div>



</body>
</html>